<template>
<div>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    :data="empData"
  >
    <el-form-item label="姓名" prop="username">
      <el-input v-model="ruleForm.username" style="width:200px" ></el-input>
    </el-form-item>
    <el-form-item label="登录密码" prop="password" >
      <el-input v-model="ruleForm.password" style="width:200px"></el-input>
    </el-form-item>
    <el-form-item label="班级" prop="clazz" >
      <el-input v-model="ruleForm.clazz" style="width:200px"></el-input>
    </el-form-item>
    <el-form-item label="房间" prop="room" >
      <el-input v-model="ruleForm.room" style="width:200px"></el-input>
    </el-form-item>
    <el-form-item label="身高" prop="height" >
      <el-input v-model="ruleForm.height" style="width:200px"></el-input>
    </el-form-item>
    <el-form-item label="体重" prop="weight" >
      <el-input v-model="ruleForm.weight" style="width:200px"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleAdd"
        >立即创建</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  data() {
    return {
      empData: [],
      ruleForm: {
        username: "",
        clazz:"",
        room:"",
        height:"",
        weight:"",
        password:""
      },
      rules: {
        name: [
          { required: true, message: "请完善信息", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        clazz:[
            { required: true, message: "请完善班级信息", trigger: "blur" }
        ],
        password:[
            { required: true, message: "请完善密码", trigger: "blur" }
        ],
        room:[
            { required: true, message: "请完善房间信息", trigger: "blur" }
        ]
      },
    };
  },
  methods: {
    mounted() {
      this.initStu()
    },
    initStu() {
      this.postRequest(url).then(res => {
                    this.loading = true
                    if (res) {
                        this.loading = false
                        this.empData = res.data
                        this.total = res.total
                    }
                })
    },
    handleAdd() {
      this.$refs['ruleForm'].validate(valid => {
                    if (valid){
                        if (this.ruleForm.id){
                            this.putRequest('/student/update',this.ruleForm).then(res => {
                                if (res){
                                    this.dialogVisible = false
                                    this.initStu()
                                }
                            })
                        }else {
                            this.postRequest('/student/add',this.ruleForm).then(res => {
                                if (res){
                                    this.dialogVisible = false
                                    this.initStu()
                                }
                            })
                        }
                    }else {
                        this.$message.warning("请完善表单信息！")
                    }
                })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.el-form-item{
  text-align: right;
}
</style>
